使用笔刷

笔刷是用于描述如何绘制 2D 内容的图形对象。例如,您可以使用笔刷定义 2D 文本块 (Text Block 2D) 节点中的文本颜色、在 2D 节点的背景中填充图像模式或者在 2D 内容应用材质效果。

多数 2D 节点通常具有前景和背景。使用笔刷,您可以更改前景和背景的外观。

Kanzi 中提供了这些笔刷:

Kanzi Studio 将笔刷存储在素材库 (Library) > 材质和纹理 (Materials and Textures) > 笔刷 (Brushes) 中。

例如,使用笔刷,您可以:

用单色填充 2D 节点

使用 颜色笔刷 (Color Brush) 以使用单色填充 2D 节点。

要用单色填充 2D 节点:

  1. 素材库 (Library)按下 Alt 并右键点击 材质和纹理 (Materials and Textures),选择 颜色笔刷 (Color Brush) 并命名笔刷 。
  2. 工程 (Project) 中,选择要使用您创建的笔刷填充的 2D 节点,并在属性 (Properties) 中添加背景笔刷 (Background Brush)前景笔刷 (Foreground Brush) 属性,然后选择您在第一步中创建的笔刷。
    例如,创建一个 2D 按钮 (Button 2D) 节点,然后在 属性 (Properties) 中添加 背景笔刷 (Background Brush) 属性,并将其设置为您在第一步中创建的笔刷。
  3. 属性 (Properties) 中点击上一步中添加的属性旁的 ,设置在上一步中创建的颜色笔刷的颜色。
    预览 (Preview) 中,您可以看到您创建的颜色笔刷 (Color Brush) 会填充您为其设置了该属性的那个节点。
    建议

    要快速编辑笔刷,在 背景笔刷 (Background Brush)前景笔刷 (Foreground Brush) 属性旁的 属性 (Properties) 中点击 并编辑笔刷。

    建议

    Kanzi Studio 中您可以应用十六进制格式的颜色到所有设置颜色的属性。在用户设置颜色的工具中,复制颜色的十六进制代码,在属性 (Properties)Kanzi Studio 中,右键点击要使用该颜色的属性的颜色样本,并选择粘贴十六进制格式的材质 (Paste Color in Hex Format)

用纹理填充 2D 节点

纹理笔刷 (Texture Brush) 可用于以纹理填充 2D 节点。

要使用纹理填充 2D 节点:

  1. 素材库 (Library)按下 Alt 并右键点击 材质和纹理 (Materials and Textures),选择 纹理笔刷 (Texture Brush) 并命名笔刷 。
  2. 工程 (Project) 中,选择要使用您创建的笔刷填充的 2D 节点,并在属性 (Properties) 中添加背景笔刷 (Background Brush)前景笔刷 (Foreground Brush) 属性,然后选择您在第一步中创建的笔刷。
    例如,创建一个 2D 网格布局 (Grid layout 2D) 节点,然后在 属性 (Properties) 中添加 背景笔刷 (Background Brush) 属性,并将其设置为您在第一步中创建的笔刷。
  3. 属性 (Properties) 中点击您在上一步中添加的属性旁边的 ,以转到属性使用的笔刷,并设置您希望纹理笔刷使用的纹理,然后调整纹理笔刷 (Texture Brush) 使用纹理的方式:

用材质填充 2D 节点

材质笔刷 (Material Brush) 可用于以材质填充 2D 节点。

要用材质填充 2D 节点:

  1. 素材库 (Library)按下 Alt 并右键点击 材质和纹理 (Materials and Textures),选择 材质笔刷 (Material Brush) 并命名笔刷 。
  2. 属性 (Properties) 中,将 材质 (Material) 属性设置为要用于填充 2D 节点的材质。
    如果您的工程中没有任何材质,请创建一个材质。 请参阅 创建材质
  3. 工程 (Project) 中,选择要使用您创建的笔刷填充的 2D 节点,并在属性 (Properties) 中添加背景笔刷 (Background Brush)前景笔刷 (Foreground Brush) 属性,然后选择您在第一步中创建的笔刷。
    例如,创建一个 2D 按钮 (Button 2D) 节点,然后在 属性 (Properties) 中添加 背景笔刷 (Background Brush) 属性,并将其设置为您在第一步中创建的笔刷。
  4. 要调整材质的外观,通过以下方式设置材质 (Material) 属性:

设置2D 文本块 (Text Block 2D) 节点中的文本颜色

要设置2D 文本块 (Text Block 2D) 节点中的文本颜色:

  1. 工程 (Project) 中创建或选择一个2D 文本块 (Text Block 2D) 节点。
  2. 属性 (Properties) 中添加前景笔刷 (Foreground Brush) 属性。
  3. 前景笔刷 (Foreground Brush) 属性设置为现有 颜色笔刷 (Color Brush),或选择 + 颜色笔刷 (+ Color Brush),命名笔刷,点击属性旁的 ,并设置您创建的 颜色笔刷 (Color Brush) 的颜色。
    建议

    要快速编辑笔刷,在 背景笔刷 (Background Brush)前景笔刷 (Foreground Brush) 属性旁的 属性 (Properties) 中点击 并编辑笔刷。

控制笔刷外观

您可以定义笔刷在不同应用程序状态下的外观。例如,当使用笔刷填充2D 按钮 (Button 2D) 节点,您可以更改用户按下按钮时笔刷的外观。

要控制笔刷外观,创建状态机,它可在使用笔刷的节点中设置笔刷的属性。

要控制笔刷的外观:

  1. 创建笔刷并用它填充 2D 节点。
    例如,创建纹理笔刷,将2D 按钮 (Button 2D) 节点的背景笔刷 (Background Brush) 属性设置为您创建的纹理笔刷。请参阅用纹理填充 2D 节点
  2. 创建状态机,您可用它控制在第一步中创建的笔刷外观。
    例如:
    1. 2D 按钮 (Button 2D) 节点创建具有ReleasedPressed 两个状态的状态机,并设置状态机使用按钮 (Button) > 为向下 (Is Down) 控制器属性。请参阅使用状态机设置按钮的状态
    2. 设置笔刷在ReleasedPressed 状态的外观。
      例如,在背景笔刷 (Background Brush) 属性旁的属性 (Properties) 中点击 ,设置笔刷调节颜色 (Brush Modulate Color) 属性,在Pressed 状态下在状态工具 (State Tools) 中点击 ,将属性值保存到Pressed 状态。

现在,当您在预览 (Preview) 中与节点交互,Kanzi 会更改您创建的笔刷的外观。

应用自定义渲染到 2D 节点

应用自定义渲染到 2D 节点,以创建后处理效果。 例如,您可以将 2D 节点中的颜色图像转换为灰度。

要应用自定义渲染到 2D 节点,使用 合成笔刷 (Composition Brush) 属性通过 材质笔刷 (Material Brush) 在屏幕上合成节点,并启用 力合成 (Force Composition) 属性。

要应用自定义渲染到 2D 节点:

  1. 创建您要应用自定义渲染的材质。
    例如,要创建一个用于将颜色转换为灰度的材质:
    1. 素材库 (Library) 中,按下 Alt 并右键点击材质和纹理 (Materials and Textures) 并选择 材质类型 (Material Type)
      Kanzi Studio 创建材质类型以及使用该材质类型的材质。
    2. 素材库 (Library) > 材质和纹理 (Materials and Textures) > 材质类型 (Material Types) 中,展开您创建的材质类型,双击 顶点着色器 (Vertex Shader) 以在 着色器源编辑器 (Shader Source Editor) 中打开,将现有的着色器代码替换为代码,然后保存着色器。
      attribute vec3 kzPosition;
      attribute vec2 kzTextureCoordinate0;
      uniform highp mat4 kzProjectionCameraWorldMatrix;
      
      varying mediump vec2 vTexCoord;
      
      void main()
      {
          precision mediump float;
          vTexCoord = kzTextureCoordinate0;
          gl_Position = kzProjectionCameraWorldMatrix * vec4(kzPosition.xyz, 1.0);
      }
    3. 打开片段着色器 (Fragment Shader) 并将现有的着色器代码替换为这一步骤中的代码,然后保存着色器。
      在着色器中,使用以下 Kanzi 默认 uniform:
      • ContentTexture 以定义渲染节点在渲染时提供的纹理
      • RenderOpacity 以定义渲染节点的不透明度
      请参阅 着色器 uniform
      uniform sampler2D ContentTexture;
      varying mediump vec2 vTexCoord;
      uniform lowp float RenderOpacity;
      
      void main()
      {
          precision mediump float;
          //使用此算法可以将 2D 节点使用的
          //纹理中的颜色转换为灰度。
          //要整合到 Kanzi 渲染管道,着色器必须输出
          //预乘阿尔法。
          vec4 color = texture2D(ContentTexture, vTexCoord);
          float grayscale = dot(color.rgb, vec3(0.21, 0.72, 0.07));
          float alpha = color.a * RenderOpacity;
          vec3 premultipliedColor = vec3(grayscale) * alpha;
          gl_FragColor = vec4(premultipliedColor, alpha);
      }
  2. 素材库 (Library) 按下 Alt 并右键点击 材质和纹理 (Materials and Textures) 中,选择材质笔刷 (Material Brush),并将其设置为使用您在上一步中创建的材质。
  3. 工程 (Project) 中,创建或选择要对其应用您创建的材质的 2D 节点。
    例如,创建一个 2D 堆栈布局 (Stack Layout 2D) 节点,并在 2D 堆栈布局 (Stack Layout 2D) 节点内创建一个 图像 (Image) 节点。

  4. 属性 (Properties) 中,添加:

在 API 中使用笔刷

有关详细信息,请参阅 API reference中的 Brush 类。

笔刷 (Brush)属性类型

要查看笔刷可用属性类型的完整列表,请参阅Brush

另请参阅

纹理

状态机

材质类型和材质

着色器